<template>
  <div v-if="d">
    <van-nav-bar
      safe-area-inset-top
      title="领养代替购买 让生命不再流浪"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
      ><!-- <template slot="right"><van-icon name="share" /></template
    > --></van-nav-bar
    >

    <van-swipe class="my-swipe" @change="onChange">
      <van-swipe-item v-for="(img, i) in imgs" :key="i"
        ><img :src="require(`../assets/adoptimage/${img}`)"
      /></van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/{{ d.imgNum }}</div>
      </template>
    </van-swipe>

    <div class="AdoptItem">
      <div class="header">
        <div class="title">{{ d.title }}</div>
        <div class="desc">
          <div>
            <span class="subtitle">性别:</span>
            <span class="sex0" v-if="d.sex == 0">妹妹</span>
            <span class="sex1" v-if="d.sex == 1">弟弟</span>
          </div>
          <div class="age"><span class="subtitle">年龄:</span>{{ d.age }}</div>
          <div><span class="subtitle">免疫驱虫:</span>{{ d.detail }}</div>
          <div>
            <span class="subtitle">所在地:</span>{{ d.address }}
            <span class="tip">{{ d.adoptway }}</span>
          </div>
        </div>
      </div>

      <!-- 内容开始 -->
      <div class="content">
        <div v-html="d.content">
          <!-- <p>
            我过生日时，阿姨送了我一只贵宾犬，我给它取名为“白雪”，白雪一身雪白雪白的，这就是它名字的由来。
          </p>
          <p>
            两只眼睛黑溜溜的，十分可爱。四只小腿不长不短，身体不胖不瘦，是标准的模特身材。耳朵向塔一样竖立着，小小的鼻，十分可爱。
          </p>
          <p>
            猫咪的身体状况。如果猫咪有一些大病小病，一定要明确告知领养人，不要“货不对板”。这样一方面是为了让领养人心里有准备，知道如何呵护猫咪，一方面也可以防止一些领养人因为货不对板而抛弃猫咪。
            猫咪的性格。不同的领养人对于猫咪的性格也有不同的需求，有些主人喜欢粘人的小猫咪，有些则喜欢独立的小猫咪。因此尽可能地告知领养人猫咪的性格特征，更容易筛选到合适的领养人。
          </p> -->
        </div>
        <div class="tel">如有意向,请联系:{{ d.tel }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      sex: 1,
      d: null,
    };
  },
  computed: {
    imgs() {
      return this.d.img.split(",");
    },
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getData() {
      this.axios
        .get(`/pets/adoptdetailbyid?id=${this.$route.query.id}`)
        .then((res) => {
          console.log("adoptres :>> ", res.data.data[0]);
          this.d = res.data.data[0];
          console.log("this.d.img.split(", ") :>> ", this.d.img.split(","));
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.my-swipe {
  width: 100vw;

  img {
    width: 100%;
    height: 80vw;
  }
  .custom-indicator {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 3px 10px;
    font-size: 16px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }
}

body {
  margin: 0;
  padding: 0;
}

.AdoptItem {
  box-sizing: border-box;
  background: #f6f6f6;
  padding: 8px 5px;
  width: 100vw;
  .header {
    margin-bottom: 5px;
    padding: 5px;
    background-color: #fff;
    .title {
      font-size: 18px;
      color: #1b1b1b;
      line-height: 1.5;
    }
    .desc {
      font-size: 14px;
      color: #474747;

      .subtitle {
        color: #9b9b9b;
        margin-right: 10px;
      }

      .tip {
        display: inline-block;
        margin: 0 10px;
        padding: 1px 5px;
        font-size: 12px;
        background-color: #d4f8ff;
        color: #3da7c0;
      }
    }
  }
  .content {
    padding: 1px 5px 5px 5px;
    margin-bottom: 5px;
    background-color: #fff;
    line-height: 1.7;

    .tel {
      text-align: right;
      font-size: 14px;
      color: black;
      padding: 20px 0 40px 0;
    }
  }
}
</style>